﻿@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<script src="~/Scripts/html2canvas.js"></script>
<script src="~/Scripts/canvas2image.js"></script>
<script src="~/Scripts/canvg.js"></script>
<script src="~/Scripts/rgbcolor.js"></script>
<script src="~/Scripts/StackBlur.js"></script>
<div>
    <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
    <div>
      @*  <input type="button" value="AddCustomPushpin" onclick="addCustomPushpin();" />*@
        <input type="button" value="AddPushpinWithOptionsText" onclick="addPushpinWithOptionsText();" />
        @*<input type="button" value="AddPushpinWithOptionsIcon" onclick="addPushpinWithOptionsIcon();" />*@
        <input type="button" value="ScreenShot" onclick="screenShot();" />
        <input type="button" value="SVB2Canvas" onclick="svg2Canvas();" />
    </div>
    <canvas id="myCanvas"></canvas>
</div>

<script type="text/javascript">
    var map = null;
    var arry = new Array();

    var mapOptions =
    {
        credentials: "Ap1pGDyAvTNm9sdIEikg0_53YkyFrgSzlizOrl9zgylREj_iH4qqEcjyu7G43A3m",
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        center: new Microsoft.Maps.Location(37.794973, -122.393542),
        enableSearchLogo: false,
        enableClickableLogo: false,
        showLogo: false,
        showDashboard: false,
        showScalebar: false,
        showCopyright: false,
        zoom: 6,
        labelOverlay: Microsoft.Maps.LabelOverlay.hidden
    }
    map = new Microsoft.Maps.Map(document.getElementById('myMap'), mapOptions);

    function addCustomPushpin() {
        var pushpinOptions = { width: null, height: null, htmlContent: "<div style='font-size:12px;font-weight:bold;border:solid 2px;background-color:LightBlue;width:100px;'>Custom Pushpin</div>" };
        var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.6, -102.33), pushpinOptions);
        map.setView({ center: new Microsoft.Maps.Location(47.6, -122.33), zoom: 3 });
        map.entities.push(pushpin);
        arry.push(pushpin.getLocation());
    }

    function addPushpinWithOptionsText() {
        map.setView({ center: new Microsoft.Maps.Location(47.6, -122.33), zoom: 3 });
        var offset = new Microsoft.Maps.Point(0, 5);
        var pushpinOptions = { text: '1', visible: true, textOffset: offset };
        var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.6, -112.33), pushpinOptions);
        map.entities.push(pushpin);
        arry.push(pushpin.getLocation());
        add2();
        add3();
        add4();
        drawLine();
    }

    function add2() {
        var offset = new Microsoft.Maps.Point(0, 5);
        var pushpinOptions = { text: '2', visible: true, textOffset: offset };
        var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(37.6, -119.33), pushpinOptions);
        map.entities.push(pushpin);
        arry.push(pushpin.getLocation());
    }

    function add3() {
        var offset = new Microsoft.Maps.Point(0, 5);
        var pushpinOptions = { text: '3', visible: true, textOffset: offset };
        var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.6, -92.33), pushpinOptions);
        map.entities.push(pushpin);
        arry.push(pushpin.getLocation());
    }

    function add4() {
        var offset = new Microsoft.Maps.Point(0, 5);
        var pushpinOptions = { text: '4', visible: true, textOffset: offset };
        var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(27.6, -102.33), pushpinOptions);
        map.entities.push(pushpin);
        arry.push(pushpin.getLocation());
    }

    function addPushpinWithOptionsIcon() {
        var offset = new Microsoft.Maps.Point(0, 5);
        var pushpinOptions = { icon: 'poi_custom.png', text: '1', visible: true, textOffset: offset };
        var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(22.6, -112.33), pushpinOptions);
        map.entities.push(pushpin);
        arry.push(pushpin.getLocation());

    }

    function drawLine() {
        var line = new Microsoft.Maps.Polyline(arry, { strokeColor: new Microsoft.Maps.Color(200, 255, 0, 0), strokeThickness: 5, strokeDashArray: "10 10" });
        map.entities.push(line);
    }

    function screenShot() {


        html2canvas(document.getElementById("myMap"), {
            proxy: "Html2CanvasProxy.ashx",
            useCORS: true,
            allowTaint: false,
            logging: true,
            onrendered: function (canvas) {
                canvas.id = "mapcanvas";
                document.body.appendChild(canvas);
                //return Canvas2Image.saveAsPNG(canvas);
            }
        });
    }

    function svg2Canvas() {
        canvg(document.getElementById('mapcanvas'), document.getElementsByTagName('svg')[0].outerHTML, { log: true, useCORS: true, ignoreClear: true, ignoreMouse: true, ignoreAnimation: true, ignoreDimensions: true });
        return Canvas2Image.saveAsPNG(document.getElementById('mapcanvas'));
    }

</script>